<template>
    <div class="title">
        <p class="name">{{ name }}</p>
        <div
            class="background"
            :style="
                'background: linear-gradient(90deg, ' +
                startColor +
                ' 0%, ' +
                endColor +
                ' 60%, #FFFFFF 100%);'
            "
        ></div>
    </div>
</template>

<script>
export default {
    name: 'Title',
    props: {
        name: {
            type: String,
            default: () => {
                return '';
            },
        },
        startColor: {
            type: String,
            default: () => {
                return '#7DE9DF';
            },
        },
        endColor: {
            type: String,
            default: () => {
                return '#FFFFFF';
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.title {
    width: fit-content;
    position: relative;
    .name {
        font-size: 32rpx;
        font-weight: 600;
        color: #2f2f2f;
        z-index: 100;
        position: relative;
    }
    .background {
        width: 100%;
        height: 16rpx;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
</style>
